<template>
  <div>
    <div id="map-con"></div>
  </div>
</template>

<script>
import IconRed from '../../assets/image/red.png'
import IconGreen from '../../assets/image/green.png'
export default {
  mounted() {
  },
  data() {
    return {
      MarkerPoint: []
    }
  },
  created () {
    this.GetCompanyList();
  },
  methods: {
    // 获取标点数据
    // 获取企业列表
    GetCompanyList() {
      let params = {
        pageNo: 1,
        pageSize: 1000
      };
      this.$api.CompanyManage.COMPANYLIST(params)
        .then(res => {
          res.data.forEach(item => {
            if (item.bd_latitude !== '' && item.bd_longtitude !== '') {
              this.MarkerPoint.push(item)
            }
          });
          this.SetMap();
        })
        .catch(() => {
          this.$message({
            message: "暂无数据",
            type: "error"
          });
        });
    },
    // 标注点击事件
    MarkerClick(res){
      console.log(res);
    },
    SetMap() {
      let map = new window.BMap.Map("map-con", {
        minZoom: 6,
        maxZoom: 30,
        enableMapClick: false
      });
      map.centerAndZoom(new window.BMap.Point(118.570991,39.772021), 12); // 初始化地图,设置中心点坐标和地图级别
      map.enableScrollWheelZoom()
      map.setMapStyleV2({
        styleId: "3fc0a07caff54d5cec9f6f00763a83e5"
      });
      var blist = [];
      var districtLoading = 0;
      function getBoundary() {
        addDistrict("滦州市");
      }
      this.DrawMarker(map)
      /**
       * 添加行政区划
       * @param {} districtName 行政区划名
       * @returns  无返回值
       */
      function addDistrict(districtName) {
        //使用计数器来控制加载过程
        districtLoading++;
        var bdary = new window.BMap.Boundary();
        bdary.get(districtName, function(rs) {
          //获取行政区域
          var count = rs.boundaries.length; //行政区域的点有多少个
          if (count === 0) {
            alert("未能获取当前输入行政区域");
            return;
          }
          for (var i = 0; i < count; i++) {
            blist.push({ points: rs.boundaries[i], name: districtName });
          }
          //加载完成区域点后计数器-1
          districtLoading--;
          if (districtLoading == 0) {
            //全加载完成后画端点
            drawBoundary();
          }
        });
      }

      function drawBoundary() {
        //包含所有区域的点数组
        var pointArray = [];
        /*画遮蔽层的相关方法
         *思路: 首先在中国地图最外画一圈，圈住理论上所有的中国领土，然后再将每个闭合区域合并进来，并全部连到西北角。
         *      这样就做出了一个经过多次西北角的闭合多边形*/
        //定义中国东南西北端点，作为第一层
        var pNW = { lat: 59.0, lng: 73.0 };
        var pNE = { lat: 59.0, lng: 136.0 };
        var pSE = { lat: 3.0, lng: 136.0 };
        var pSW = { lat: 3.0, lng: 73.0 };
        //向数组中添加一次闭合多边形，并将西北角再加一次作为之后画闭合区域的起点
        var pArray = [];
        pArray.push(pNW);
        pArray.push(pSW);
        pArray.push(pSE);
        pArray.push(pNE);
        pArray.push(pNW);
        //循环添加各闭合区域
        for (var i = 0; i < blist.length; i++) {
          //添加多边形层并显示
          var ply = new window.BMap.Polygon(blist[i].points, {
            strokeWeight: 3,
            strokeColor: "#1AB0DE",
            fillOpacity: 0.01,
            fillColor: " #FFFFFF"
          }); //建立多边形覆盖物

          map.addOverlay(ply);

          //将点增加到视野范围内
          var path = ply.getPath();
          pointArray = pointArray.concat(path);
          //将闭合区域加到遮蔽层上，每次添加完后要再加一次西北角作为下次添加的起点和最后一次的终点
          pArray = pArray.concat(path);
          pArray.push(pArray[0]);
        }
        //添加遮蔽层
        var plyall = new window.BMap.Polygon(pArray, {
          strokeOpacity: "#04021A",
          strokeColor: "#1AB0DE",
          strokeWeight: 0.00001,
          fillColor: "#04021A",
          fillOpacity: 1
        }); //建立多边形覆盖物
        map.addOverlay(plyall);
      }

      setTimeout(function() {
        getBoundary();
      }, 100);
      // 添加行政区域      
    },
    DrawMarker(map){
      this.MarkerPoint.forEach(item => {
        let myIcon = ''
        if (item.companyState === '0') {
          myIcon = new window.BMap.Icon(IconRed, new window.BMap.Size(37,37));          
        }else{
          myIcon = new window.BMap.Icon(IconGreen, new window.BMap.Size(37,37));                    
        }
        const pt = new window.BMap.Point(item.bd_longtitude,item.bd_latitude);
        let marker2 = new window.BMap.Marker(pt,{icon:myIcon});  // 创建标注
        let that = this
        marker2.addEventListener('click',function() {
          that.MarkerClick(item)
        })
        map.addOverlay(marker2);
      });      
    }
  }
};
</script>

<style scoped lang="scss">
.h-100 {
  height: 100%;
}
.w-100 {
  width: 100%;
}
#map-con {
  @extend .h-100;
  @extend .w-100;
}
</style>